import React from 'react';
import {
    View,
    Text,
    Image,
    ScrollView,
    TouchableOpacity,
    TouchableWithoutFeedback
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign'; //图标
import NavigationUtil from '../../navigator/NavigationUtil';
import {SafeAreaView} from 'react-navigation';
import {screen} from '../../public/common';
import DataStore, {BaseUrl} from '../../public/dao/DataStore';
import styles from './style/App';
import reanderStyle from './style/renderBox';
import DiaLog from '../../components/DiaLog';
import MyTextInput from '../../components/MytextInput';
import BackPressComponent from '../../components/BackPressComponent';
export default class LoanDetail extends React.Component {
    constructor(props){
        super(props);
        this.backPress = new BackPressComponent({backPress: () => this.onBackPress()});
        this.params = this.props.navigation.state.params;
        let {item} = this.params;
        this.state = {
            pageData:item,
            url:'',
            name:'',
            // ---------
            userName:'',
            mobile:null,
            idcard:''
        }
    }
    onBackPress() {
        NavigationUtil.goBack(this.props.navigation);
        return true;
    }
    componentWillMount(){
        this._INIT();
    }
    componentDidMount(){
        this.backPress.componentDidMount();
    }
    componentWillUnmount() {
        this.backPress.componentWillUnmount();
    }
    _INIT = ()=>{ // 加载用户数据
        let dataStore = new DataStore();
        dataStore.fetchLocalData('USERDATAS').then((json)=>{
            this.setState({
                mobile:json.data.mobile,
                userName:json.data.name
            })
        }).catch(()=>{
            this.setState({mobile:null})
        })
    }
    //申请
    _open=(url,name)=>{
        if(this.state.mobile){
            let dataStore = new DataStore();
            dataStore.fetchLocalData('USERIDCARD').then((json)=>{
                if(json.data.idcard){
                    NavigationUtil.goPage({
                        name,
                        url
                    },'MyWebView')
                }else{
                    this.dialog.setModalVisible(true);
                    this.setState({idcard:null,url,name});
                }
            }).catch(()=>{
                this.dialog.setModalVisible(true);
                this.setState({idcard:null,url,name});
            })
        }else{
            NavigationUtil.goPage({
                refresh:()=> {
                    this._INIT();//传递一个方法返回时调用
                }
            },'Login')
        }
    }
    // 提交
    _submit =()=>{
        let {name,url,mobile,idcard} =this.state
        let params = {mobile,idcard};
        let dataStore = new DataStore();
        dataStore.saveData('USERIDCARD',{idcard}) //保存用户身份证号码
        dataStore.fetchData('/webservice/updateinfo',params,'POST','',true,true).then((json)=>{
            if(json.data.errno == 0){
                this.dialog.setModalVisible(false);
                this._open(name,url);
            }
        })
    };
    _renderBox = ()=>{
        return <View style={reanderStyle.renderBox}>
            <View style={reanderStyle.waninputStyle}>
                <AntDesign
                name={'user'}
                size={20}
                />
                <Text style={reanderStyle.userText}>{this.state.userName}</Text>
            </View>
            <View style={reanderStyle.waninputStyle}>
                <AntDesign
                name={'creditcard'}
                size={20}
                />
                <MyTextInput 
                    maxLength={18}
                    placeholder="请输入身份证号码"
                    editable={true}//是否可编辑
                    style={reanderStyle.inputStyle}//input框的基本样式
                    onChangeText={(idcard=>this.setState({idcard}))}//输入框改变触发的函数
                />
            </View>
            <TouchableOpacity 
                style={reanderStyle.buttonFont} 
                onPress={() => {this._submit()}}>
                <Text style={reanderStyle.buttonText}>提交</Text>
            </TouchableOpacity>
        </View>
    }
    render() {
        const {pageData} = this.state;
        return (
            <SafeAreaView style={{height:screen.height}}>   
                <ScrollView style={styles.container}>
                    <View style={styles.containerTop}>
                        <View style={styles.containerTopCard}> 
                            <View style={styles.footerTop}>
                                <View>
                                    <Image 
                                        style={styles.logoImg}
                                        source={{uri:`${BaseUrl}/${pageData.image_url}`}}/>
                                </View>
                                <View style={styles.nameMiaoshu}>
                                    <Text>{pageData.name}</Text>
                                    <Text style={styles.miaoshu}>{pageData.repay_term}</Text>
                                </View>
                            </View>
                            <View style={styles.erdu}>
                                <View>
                                    <Text style={styles.erduText}>额度（3000元-30万元）</Text>
                                    <Text style={styles.jinerText}>{pageData.scope}</Text>
                                </View>
                            </View>
                            <View style={styles.centerFont}>
                                <View>
                                    <Text style={styles.namefont}>每月还款</Text>
                                    <Text style={styles.miaoshuFont}>***</Text>
                                </View>
                                <View>
                                    <Text style={styles.namefont}>日利率</Text>
                                    <Text style={styles.miaoshuFont}>{pageData.interest_rate}</Text>
                                </View>
                                <View>
                                    <Text style={styles.namefont}>最快放款</Text>
                                    <Text style={styles.miaoshuFont}>{pageData.lend_time}</Text>
                                </View>
                            </View>
                            <Text style={styles.jgck}>*仅供参考，请以实际批审结果为准*</Text>
                        </View>
                    </View>
                    <View style={styles.main}>
                        <Text style={styles.mainH2}>申请条件</Text>
                        <Text>{pageData.apply_conditions}</Text>
                        <Text style={styles.mainH2}>所需材料</Text>
                        <Text>身份证</Text>
                        <Text style={styles.mainH2}>优势</Text>
                        <Text>{pageData.advantage}</Text>
                    </View>
                    <TouchableWithoutFeedback onPress={()=>{this._open(pageData.url,pageData.name)}}>
                        <View style={styles.btnFont}>
                            <Text style={styles.btnText}>立即申请</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </ScrollView>
                <DiaLog
                    ref={dialog => this.dialog = dialog}
                    Datas={this._renderBox}/>
            </SafeAreaView>)
    }
}
